<template>
  <div class="page">
    <EasyDataTable
    ref="dataTable"
    theme-color="#1d90ff"
    table-class-name="customize-table"
    v-model:items-selected = itemsSelected
    hide-footer
    :headers="headers"
    :items="items"
    :rows-per-page="10"
    >
    <!-- <template #cell(name)="data">
      <div class="cell" :style="{ width: '100px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }">
        {{ data.value }}
      </div>
    </template> -->
    <!-- 定制中文释义槽位 防止溢出 -->
    <template #item-chineseExplain="{chineseExplain}">
      <div :style="{ width: '300px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }">
        {{ chineseExplain }}
      </div>
    </template>
    <!-- 定制中文释义槽位 防止溢出 -->
    <!-- 定制音标槽 -->
    <template #item-phonetic="{phonetic,pronunciation}">
      <div :style="{ width: '100px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }">
        <i class="iconfont audio" @click="playAudio(pronunciation)">&#xe610;</i>&nbsp;
        {{ phonetic }}
      </div>
    </template>
    <!-- 定制音标槽/ -->
    <!-- 定制英文意槽 -->
    <template #item-wordname="{wordname}">
      <div :style="{ width: '100px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }">
        {{ wordname }}
      </div>
    </template>
    <!-- 定制英文意槽 -->
    </EasyDataTable>

    <!-- 自定义footer -->
    <div class="customize-buttons">
      <span
        v-for="paginationNumber in maxPaginationNumber"
        :key="paginationNumber"
        class="customize-button"
        :class="{'active': paginationNumber === currentPaginationNumber}"
        @click="updatePage(paginationNumber)"
      >
        {{paginationNumber}}
      </span>
    </div>
  </div>

  <coursesFooter></coursesFooter>
</template>
<script>
// 底部选择栏组件引用
import coursesFooter from './courses-footer.vue'
// 调用获取具体词课接口
import { getCourses } from '@/api/courses'
// 使用store vuex
// import { useStore } from 'vuex'
export default {
  name: 'word-list',
  components: {
    coursesFooter
  },
  data () {
    return {
      headers: [
        { text: '单词', value: 'wordname', width: 180 },
        { text: '音标', value: 'phonetic', width: 180 },
        { text: '释义', value: 'chineseExplain', width: 380 }
      ],
      items: [
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' },
        { wordname: 'comment', phonetic: '[ˈkɔment]', chineseExplain: 'n. 评论，意见；体现，写照', pronunciation: 'https://dict.youdao.com/dictvoice?audio=comment&le=en' }
      ],
      // 选中的数据
      itemsSelected: [],
      maxPaginationNumber: 2,
      currentPaginationNumber: 1
    }
  },
  methods: {
    // 点击小喇叭播放读音
    playAudio (src) {
      const audio = new Audio()
      audio.src = src
      audio.play()
    },
    // 跳转至指定单词页面
    updatePage (num) {
      // console.log(num)
      this.currentPaginationNumber = num
      const dataTable = this.$refs.dataTable
      dataTable.updatePage(num)
    }
  },
  created () {
    // 获取单词书指定课程的单词信息传入表格
    getCourses(this.$route.query).then(res => {
      // console.log(res.data)
      this.items = res.data
      // 默认全选
      this.itemsSelected = res.data
      // 默认全选所有单词进行测试！
      this.$store.commit('courses/setTest', res.data)
    })
  },
  // 侦听选择单词的改变
  watch: {
    itemsSelected (item1, item2) {
      // const store = useStore()
      this.$store.commit('courses/setTest', item1)
    }
  }
  // 组件销毁前  弃用 改用watch监听 以及created 时传
  // beforeUnmount () {
  //   // 跳转至测试界面前将选好要测试的单词传入vuex
  //   // console.log(this.itemsSelected)
  // }
}
</script>
<style scoped lang="less">

.customize-table {
  --easy-table-border: none;
  --easy-table-row-border: none;

  --easy-table-header-font-size: 14px;
  --easy-table-header-height: 20px;
  --easy-table-header-font-color: #181818;
  --easy-table-header-background-color: #ffffff;

  --easy-table-header-item-padding: 10px 15px;

  --easy-table-body-even-row-font-color: #fff;
  --easy-table-body-even-row-background-color: #ffffff;

  --easy-table-body-row-font-color: #000000;
  --easy-table-body-row-background-color: #ffffff;
  --easy-table-body-row-height: 30px;
  --easy-table-body-row-font-size: 14px;
  --easy-table-body-row-width:200px;

  --easy-table-body-row-hover-font-color: #000000;
  --easy-table-body-row-hover-background-color: #ffffff;

  --easy-table-body-item-padding: 6px 10px;

  --easy-table-footer-background-color: #ffffff;
  --easy-table-footer-font-color: #969696;
  --easy-table-footer-font-size: 14px;
  --easy-table-footer-padding: 10px 10px;
  --easy-table-footer-height: 50px;

  --easy-table-rows-per-page-selector-width: 70px;
  --easy-table-rows-per-page-selector-option-padding: 10px;
  --easy-table-rows-per-page-selector-z-index: 1;

  --easy-table-scrollbar-track-color: #2d3a4f;
  --easy-table-scrollbar-color: #2d3a4f;
  --easy-table-scrollbar-thumb-color: #4c5d7a;;
  --easy-table-scrollbar-corner-color: #2d3a4f;

  --easy-table-loading-mask-background-color: #2d3a4f;
}

.audio{
  cursor: pointer;
  &:active{
    color: dodgerblue;
  }
}

.customize-buttons{
  position: absolute;
  left: 45%;
  top: 520px;
  display: flex;
  .customize-button{
    cursor: pointer;
    padding: 10px 15px;
    background-color: #ddd;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    margin-right: 10px;
    transition: background-color 0.3s ease;
    &:hover{
      background-color: #555;
      color: #fff;
    }
  }
  .active{
    background-color: dodgerblue;
    color: white;
  }
}

</style>
